<template>
  <view class="component search-box cover-up-search">
    <up-search class="up-search" v-bind="computedAttrs" color="#1A1A1A" :inputStyle="{height: '40rpx'}"  placeholderColor="#B3B5C7" bgColor="#F4F8FB"></up-search>
  </view>
</template>

<script setup>

const inputStyle = {
  background:' #000;'
}
// 获取透传的属性
const attrs = useAttrs();

// 定义 props
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  }
});

// 定义 emit
const emit = defineEmits(['update:modelValue']);

// 内部状态
const searchKeyword = ref(props.modelValue);

// 监听外部模型值的变化
watch(() => props.modelValue, (newValue) => {
  searchKeyword.value = newValue;
});

// 定义默认值
const defaultPlaceholder = '请输入应用名称或拼音';
const defaultShowAction = false;
const defaultShape = 'square';
const defaultClearable = true;

// 计算属性，用于合并默认值和透传的属性
const computedAttrs = computed(() => ({
  placeholder: attrs.placeholder || defaultPlaceholder,
  showAction: attrs.showAction !== undefined ? attrs.showAction : defaultShowAction,
  shape: attrs.shape || defaultShape,
  clearable: attrs.clearable !== undefined ? attrs.clearable : defaultClearable,
  ...attrs
}));

</script>



<style lang="scss" scoped>
@import "@/static/scss/theme.scss";

.search-box {
  padding: 16rpx 20rpx;
  border-radius: 4rpx;
  background-color: $bg-color;
}
</style>
